<template>
    <div style="line-height:60px;font-size: 12px;display:flex;">
        <div style="flex:1;font-size:18px;">

            <span :class="collapseBtnClass" style="cursor: pointer;" @click="collapse"></span>

            <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px;">
                <el-breadcrumb-item :to="$route.path !== item.path ? item.path : '' " v-for="item in breadCrmbList" :key="item.path">{{ item.meta.name }}</el-breadcrumb-item>
            </el-breadcrumb>

        </div>

        <el-dropdown style="width:90px;">
            <span style="margin-left: 10px;cursor:pointer;">王小虎</span><i class="el-icon-arrow-down"></i>
            <el-dropdown-menu slot="dropdown" style="margin-right: 10px;">
                <el-dropdown-item style="font-size: 0.9rem;line-height: 1.5rem;padding: 5px 10px;">个人中心</el-dropdown-item>
                <el-dropdown-item style="font-size: 0.9rem;line-height: 1.5rem;padding: 5px 10px;">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: 'Header',

    data() {
        return {
        };
    },
    props: {
        collapseBtnClass: String,
        collapse: Boolean
    },
    created() {
    },
    computed: {
        breadCrmbList() {
            return this.$route.matched
        }
    },

    mounted() {
        
    },

    methods: {

    },
};
</script>

<style scoped></style>